<template>
  <div class="container">
    <div class="nav-bar">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>会员管理</el-breadcrumb-item>
        <el-breadcrumb-item>举报信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="container-main">
      <Search
        :searchList='searchList'
        size="small"
        otherText="新增举报"
        other
        @other="commonHandle({type: 'add'})"
        @search="searchHandle('search', $event)"
        @refresh="searchHandle('refresh', $event)"
      />
      <div class="main-table">
        <el-table :data="tableData" border style="width: 100%" size="small" v-loading="tableLoading">
          <el-table-column prop="memberName" label="举报会员名称" min-width="200" />
          <el-table-column prop="memberNameEd" label="被举报会员名称" min-width="200" />
          <el-table-column prop="content" label="内容描述" min-width="200" />
          <el-table-column prop="reportState" label="状态" min-width="200" />
          <el-table-column label="创建时间" min-width="200" >
            <template slot-scope="{row}">
              <div>{{row.time}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="200"
            fixed="right" >
            <template slot-scope="{row}">
              <el-button type="text" size="small" @click="commonHandle({type: 'see', item: row})">查看</el-button>
              <el-button type="text" size="small" @click="commonHandle({type: 'edit', item: row})">编辑</el-button>
              <el-button type="text" size="small" @click="commonHandle({type: 'delete', item: row})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="main-page">
        <el-pagination
          background
          :page-size="10"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="totalPage" />
      </div>
    </div>

    <el-dialog :title="handleType == 'add' ? '添加举报' :  handleType == 'see' ? '查看举报' : '修改举报'" :visible.sync="handleDialog" top="5vh">
      <div style="max-height: 400px; overflow: scroll;">
        <el-form ref="submitForm" :model="formData" label-width="120px" :rules="rules">
          <el-form-item label="举报会员ID" prop="memberId">
            <el-input v-model="formData.memberId" size="mini" :disabled="handleType == 'see'" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="举报会员名称" prop="memberName">
            <el-input v-model="formData.memberName" size="mini" :disabled="handleType == 'see'" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="被举报会员ID" prop="memberIdEd">
            <el-input v-model="formData.memberIdEd" size="mini" :disabled="handleType == 'see'" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="被举报会员名称" prop="memberNameEd">
            <el-input v-model="formData.memberNameEd" size="mini" :disabled="handleType == 'see'" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="内容描述" prop="content">
            <el-input v-model="formData.content" size="mini" :disabled="handleType == 'see'" :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="reportState">
            <el-radio-group v-model="formData.reportState" size="mini" :disabled="handleType == 'see'">
              <el-radio :label="item.code" v-for="(item, index) in dataType.reportStateList" :key="index">{{item.name}}</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" v-if="handleType != 'see'">
        <el-button @click="handleDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitHandle()" size="mini">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Search from '../../components/Common/Search'
export default {
  created() {
    this._getPage()
    this._getDatatypeList('reportStateList', 95)
  },
  data() {
    return {
      searchList: [
        { value: '', key: 'realName', type: 'input', placeholder: '请输入举报姓名' },
        { value: '', key: 'name', type: 'input', placeholder: '举报昵称' },
      ],
      searchForm: {},
      tableData: [],
      tableLoading: false,
      currentPage: 1,
      totalPage: 0,
      handleType: 'see',
      formData: {},
      currentHandleId: '',
      handleDialog: false,
      rules: {
        // memberId: [
        //     { required: true, message: '请输入举报会员ID', trigger: 'blur' },
        // ],
        // memberIdEd: [
        //     { required: true, message: '请输入被举报会员ID', trigger: 'blur' },
        // ],
        // memberName: [
        //     { required: true, message: '请输入举报会员名称', trigger: 'blur' },
        // ],
        // memberNameEd: [
        //     { required: true, message: '请输入被举报会员名称', trigger: 'blur' },
        // ],
        // content: [
        //     { required: true, message: '请输入内容描述', trigger: 'blur' },
        // ],
        // reportState: [
        //     { required: true, message: '请选择状态', trigger: 'change' },
        // ],
      }
    }
  },

  components: {
    Search
  },

  computed: {},

  watch: {

  },

  methods: {
    commonHandle({ type, item }) {
      this.handleType = type
      if (type === 'edit' || type === 'see') {
        this.handleDialog = true
        this.currentHandleId = item.id
        this._loadById(item.id)
      } else if (type === 'delete') {
        this._deleteById(item.id)
      } else if (type === 'add') {
        this.handleDialog = true
        this.formData = {}
      }
    },
    searchHandle(type, form) {
      this.searchForm = form
      if (type === 'search') {
        this._getPage(form)
      } else if (type === 'refresh') {
        this._getPage()
        this.searchList.forEach(item => {
          item.value = ''
        })
      }
    },
     // 删除单个举报
    _deleteById(id) {
      this.$confirm(`您真的要删除此举报吗`, `温馨提示`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.$api.reportInfoDelete(id)
          .then(res => {
            if (res.code === 200) {
              this.$message.success('删除成功')
              this._getPage()
            } else {
              this.$message.warning(res.text || '服务器出现错误')
            }
          })
      })
    },
    // 新增/修改举报提交
    submitHandle() {
      this.$refs['submitForm'].validate((valid) => {
        if (valid) {
          let API = 'reportInfoUpdate'
          if (this.handleType === 'add') {
            API = 'reportInfoCreate'
          }

          this.$api[API](this.formData, this.currentHandleId).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this._getPage()
              this.handleDialog = false
            } else {
              this.$message({
                message: res.text,
                type: 'warning'
              })
            }
          })
        }
      })
    },
    // 获取举报列表
    async _getPage(form = {}) {
      this.tableLoading = true
      const res = await this.$api.reportInfoPage({
        page: this.currentPage,
        size: 10,
        ...form
      })

      this.tableLoading = false
      if (res.code === 200) {
        this.tableData = res.data.rows
        this.totalPage = +res.data.total
      }
    },
    // 获取某个举报信息
    async _loadById(id) {
      const res = await this.$api.reportInfoLoad(id)
      if (res.code === 200) {
        this.formData = res.data
      }
    },
  }
}
</script>
<style lang='scss' scoped>
</style>
